.skeleton {
  position: absolute;
  transition: background 70ms cubic-bezier(0, 0, 0.4, 0.9);
  background: var(--color-bg-raised-2);
  opacity: 0.6;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;

  &::before {
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    background: var(--color-bg-raised-2);
    animation: 2s ease-in-out infinite skeleton;
  }
}

@keyframes skeleton {
  0%,
  100% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 0.3;
  }

  20% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }

  30%,
  79% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: right;
    transform-origin: right;
  }

  51%,
  60% {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: right;
    transform-origin: right;
  }

  80% {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: left;
    transform-origin: left;
    opacity: 1;
  }
}
